<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../../image/favicon.ico" sizes="16x16">
    <link rel="stylesheet" href="../../css/index.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <title>Gallery</title>
    <script src="../../js/jquery-3.7.1.min.js"></script>
    <script src="../../js/main.js"></script>
</head>
<body id="body" class="gallery gallery-control2">
<input id="color-mode-on" name="color-mode" type="radio"/>
<input id="color-mode-off" name="color-mode" type="radio" checked/>

<div class="page">
    <!--全屏遮罩-->
    <div class="mask" id="mask" style="display: none;">
        <div class="footer-info mask-main">
            <div class="mask-close"  id="mask-off">
                <span class="iconfont icon-close"></span>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../gallery/gallery.html">GALLERY</a>
                <a class="footer-nav-text" href="../gallery/gallery.html">Amoy</a>
                <a class="footer-nav-text" href="../gallery/gallery-1.html">The bank of Laodao river</a>
                <a class="footer-nav-text" href="../gallery/gallery-2.html">UK</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../collection/collection.html">COLLECTION</a>
                <a class="footer-nav-text" href="../collection/collection.html">B&W</a>
                <a class="footer-nav-text" href="../collection/collection-1.html">Architecture</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../introduction/introduction.html">ABOUT YUK1</a>
            </div>
        </div>
    </div>
    <!-- 页眉 导航栏 -->
    <header>
        <div class="shortcut-bar long-nav">
            <div class="shortcut-btn">
                <div id="logged-in-content" class="logged-content">
                    <div class="username">
                        <img src="../../image/logo/logo.png" id="user-icon" class="user-icon nav-icon-short" alt=""/>
                        <div id="username"></div> 
                        <div class="split-line"></div>
                        <div id="city"></div>
                    </div>
                    <div  class="user-icon"><span id="weather"></span></div>
                </div>
                <div id="logged-out-content">
                    <a href="../login/login.html" class="user-icon">
                        <span class="iconfont icon-wode"></span>
                    </a>
                </div>
                <div class="language">ENGLISH</div>
                <div>
                    <label class="color-mode-btn color-mode-on-btn" for="color-mode-on">Color-Aware<span class="iconfont icon-on"></span></label>
                    <label class="color-mode-btn color-mode-off-btn" for="color-mode-off">Color-Aware <span class="iconfont icon-off"></span></label>
                </div>
            </div>
        </div>
        <div class="nav-bar long-nav">
            <div class="nav-container">
                <div class="nav-menu">
                    <a href="../../index.html"><img src="../../image/logo/logo.jpg" class="nav-icon" alt=""/></a>
                    <a href="../gallery/gallery.html" class="nav-bar-item">GALLERY</a>
                    <a href="../collection/collection.html" class="nav-bar-item">COLLECTION</a>
                </div>
                <div class="nav-side-menu" id="mask-on">
                    <span class="iconfont icon-xiaojianju"></span>
                </div>
            </div>
        </div>
    </header>
    <div class=container><input id=left_btn1 name=dir type=radio class=dir_btn> <input id=left_btn2 name=dir type=radio
                                                                                       class=dir_btn> <input
            id=left_btn3 name=dir type=radio class=dir_btn> <input id=left_btn4 name=dir type=radio class=dir_btn>
        <input id=right_btn1 name=dir type=radio class=dir_btn> <input id=right_btn2 name=dir type=radio class=dir_btn>
        <input id=right_btn3 name=dir type=radio class=dir_btn> <input id=right_btn4 name=dir type=radio class=dir_btn>
        <div class=pic>
            <div class=box>
                <div class=item>
                    <div class=item-text>
                        <div class=item-title>
                            <div class=item-tag><h2>Amoy</h2></div>
                            <div class=item-time><h3>2023.01.30</h3></div>
                        </div>
                        <div class=item-content>It is not only the people who are anxious to get home from work, but
                            also the sun.
                        </div>
                    </div>
                    <img alt="" src=../../image/GALLERY/Amoy/GALLERY_AMOY_1.JPG></div>
                <div class=item>
                    <div class=item-text>
                        <div class=item-title>
                            <div class=item-tag><h2>Amoy</h2></div>
                            <div class=item-time><h3>2023.01.31</h3></div>
                        </div>
                        <div class=item-content>The eastern dragon is waking up.</div>
                    </div>
                    <img alt="" src=../../image/GALLERY/Amoy/GALLERY_AMOY_2.JPG></div>
                <div class=item>
                    <div class=item-text>
                        <div class=item-title>
                            <div class=item-tag><h2>Amoy</h2></div>
                            <div class=item-time><h3>2023.01.30</h3></div>
                        </div>
                        <div class=item-content>Ebb and flow through the ages.</div>
                    </div>
                    <img alt="" src=../../image/GALLERY/Amoy/GALLERY_AMOY_3.JPG></div>
                <div class=item>
                    <div class=item-text>
                        <div class=item-title>
                            <div class=item-tag><h2>Amoy</h2></div>
                            <div class=item-time><h3>2023.01.30</h3></div>
                        </div>
                        <div class=item-content>The sea mealted into the sky, but I rely on my glasses.</div>
                    </div>
                    <img alt="" src=../../image/GALLERY/Amoy/GALLERY_AMOY_4.JPG></div>
            </div>
        </div>
        <div class="dir_box left_box"><label for=left_btn1 class="btn_btn_1 left_btn_1"></label> <label for=left_btn2
                                                                                                        class="btn_btn_2 left_btn_2"></label>
            <label for=left_btn3 class="btn_btn_3 left_btn_3"></label> <label for=left_btn4
                                                                              class="btn_btn_4 left_btn_4"></label>
        </div>
        <div class="dir_box right_box"><label for=right_btn1 class="btn_btn_1 right_btn_1"></label> <label
                for=right_btn2 class="btn_btn_2 right_btn_2"></label> <label for=right_btn3
                                                                             class="btn_btn_3 right_btn_3"></label>
            <label for=right_btn4 class="btn_btn_4 right_btn_4"></label></div>
    </div>
    <div class=footer-nav>
        <div class=footer-info>
            <div class=footer-group><a href=../gallery/gallery.html class=footer-nav-title>GALLERY</a> <a
                    href=../gallery/gallery.html class=footer-nav-text>Amoy</a> <a href=../gallery/gallery-1.html
                                                                                   class=footer-nav-text>The bank of
                Laodao river</a> <a href=../gallery/gallery-2.html class=footer-nav-text>UK</a></div>
            <div class=footer-group><a href=../collection/collection.html class=footer-nav-title>COLLECTION</a> <a
                    href=../collection/collection.html class=footer-nav-text>B&W</a> <a
                    href=../collection/collection-1.html class=footer-nav-text>Architecture</a></div>
            <div class=footer-group><a href=../introduction/introduction.html class=footer-nav-title>ABOUT YUK1</a>
            </div>
        </div>
    </div>
    <div class=footer-info-2>
        <div class=logo-2></div>
        <div class=footer-text><a href=../introduction/introduction.html>@2023 YUK1</a></div>
    </div>
</div>
